import React from 'react';
import $ from 'webpack-zepto';
import GoodsItem from '../../activity/componet/goods-item.js';
import GoodsSpec from './goods-spec.js';
import GoodsCounter from './goods-counter.js';
import Util from '../../common/util.js';
import Config from '../../common/config.js';
import Loader from '../../common/loader.js';


var scope;
export default class GoodsView extends React.Component{
    constructor(props){
        super(props);
        scope = this;
        Util.storage().remove('toBuyGoods');
        scope.toInitState('init');
    };

    toInitState(type){
        var disGoodsId,add_price=0,discountNum = 0;
        var yhg_goods = scope.props.data.goods[0].yhg_goods;
        if(yhg_goods && yhg_goods.length > 0){
            disGoodsId = yhg_goods[0].yhg_goods_id;
            add_price = parseInt(yhg_goods[0].add_price);
            discountNum = 1;
        }
        if('init' == type){
            scope.initState(discountNum,disGoodsId,add_price,yhg_goods);
        }else if('reset' == type){
            scope.resetState(discountNum,disGoodsId,add_price,yhg_goods);
        }

    };

    initState(discountNum,disGoodsId,add_price,yhg_goods){
        var firstGoods = scope.props.data.goods[0];
        scope.state = {
            goods : scope.props.data,
            choosed_index : 0,
            choosed_index_dis : 0,
            number : 1,
            discountNum : discountNum,
            price : firstGoods.sale_price,
            goodsId : firstGoods.goods_id,
            disGoodsId : disGoodsId,
            totalPrice : firstGoods.sale_price * 1 + add_price,
            orderGoods : [firstGoods],
            orderDisGoods : yhg_goods
        };
    };

    resetState(discountNum,disGoodsId,add_price,yhg_goods){
        var firstGoods = scope.props.data.goods[0];
        scope.setState({
            choosed_index : 0,
            choosed_index_dis : 0,
            number : 1,
            discountNum : discountNum,
            price : firstGoods.sale_price,
            goodsId : firstGoods.goods_id,
            disGoodsId : disGoodsId,
            totalPrice : firstGoods.sale_price * 1 + add_price,
            orderGoods : [firstGoods],
            orderDisGoods : yhg_goods
        });
    };

    handleSpecChoose(data){
        var discount_goods,disGoodsId,add_price = 0;
        var number = scope.state.number;
        var discountNum = scope.state.discountNum;
        var orderDisGoods = scope.props.data.goods[data.choosed_index].yhg_goods;
        var choosed_index_dis = data.choosed_index;
        if(orderDisGoods && orderDisGoods.length > 0){
            // var choosed_index_dis= dis_choose_index;
            if(!orderDisGoods[choosed_index_dis]){
                choosed_index_dis = 0;
            }
            discount_goods = orderDisGoods;
            add_price = orderDisGoods[choosed_index_dis].add_price;
            disGoodsId = orderDisGoods[choosed_index_dis].yhg_goods_id;
        }
        var totalPrice = number * data.price + discountNum * add_price;
        scope.setState({
            price : data.price,
            choosed_index : data.choosed_index,
            choosed_index_dis : choosed_index_dis,
            goodsId : scope.props.data.goods[data.choosed_index].goods_id,
            disGoodsId : disGoodsId,
            totalPrice : totalPrice,
            orderGoods : [scope.props.data.goods[data.choosed_index]],
            orderDisGoods : discount_goods
        });
    };

    toHandleNumber(number){
        var price = scope.state.price;
        var add_price = 0;
        var oldNumber = scope.state.number;
        var choosed_index_dis= scope.state.choosed_index_dis;
        var discountNum = scope.state.discountNum;
        var orderDisGoods = scope.state.orderDisGoods;
        if(orderDisGoods){
            var disGoods = orderDisGoods[choosed_index_dis];
            if(disGoods){
                add_price = disGoods.add_price;
            }
            if(oldNumber > number){
                if(oldNumber == discountNum){
                    scope.setState({
                        number : number,
                        discountNum: number,
                        totalPrice : price * number + add_price * number
                    });
                    return;
                }
            }
        }
        scope.setState({
            number : number,
            totalPrice : price * number + add_price * discountNum
        });
    };

    toHandleDisNumber(number){
        var choosed_index_dis= scope.state.choosed_index_dis;
        var add_price = scope.state.orderDisGoods[choosed_index_dis].add_price;
        var goodsPrice = scope.state.price;
        var goodsNumber = scope.state.number;
        scope.setState({
            discountNum : number,
            totalPrice : goodsPrice * goodsNumber + add_price * number
        });
    };

    handleAddCart(){
        var data = {
            goods_id : scope.state.goodsId,
            goods_num : scope.state.number
        };

        if(scope.state.discountNum > 0){
            data.yhg_goods_num = scope.state.discountNum;
            data.yhg_goods_id = scope.state.disGoodsId;
        }
        var token = Util.storage().get(scope.props.appId);
        $.ajax({
            url : Config.path('duolu/cart',['?uToken=' + token]),
            type : 'POST',
            data : data,
            dataType : 'json',
            beforeSend : function(){
                Loader.start();
            },
            success : function (resp) {
                Loader.end();
                if(resp.status == 200){
                    scope.toInitState('reset');
                }else if(resp.status == 401){
                    alert('用户登录失效！');
                    var appid = Util.getUrlParam('appid');
                    window.location.href = 'index.html?appid=' + appid;
                }else {
                    alert('添加购物车失败！');
                }
            }
        });
    };

    handleBuy(){
        var orderGoods = scope.state.orderGoods[0];
        orderGoods.goods_num = scope.state.number;
        orderGoods.gc_name = scope.props.data.gc_name;
        orderGoods.yhg_goods = [];
        if(scope.state.discountNum > 0){
            var index_dis = scope.state.choosed_index_dis;
            orderGoods.yhg_goods = [scope.state.orderDisGoods[index_dis]];
            orderGoods.yhg_goods[0].yhg_goods_num = scope.state.discountNum;
        }
        var data = {
            orderGoods : scope.state.orderGoods,
            totalPrice : scope.state.totalPrice
        }
        Util.storage().put('toBuyGoods',data);
        location.href = 'order.html?type=buy&appid=' + Util.getUrlParam('appid');
    };

    render(){
        return (
            <div className="goods-box">
                {this.goodsInfo()}
                {this.middlePart()}
                {this.discountPart()}
                {this.contactUs()}
                {this.details()}
                {this.bottom()}
            </div>
        );
    };

    goodsInfo(){
        return (
            <div className="view-part goods-info">
                <div className="goods-name">{scope.state.goods.gc_name}</div>
                <p className="goods-desc">{scope.state.goods.gc_desc}</p>
                <div className="goods-price">RMB<span className="price">{scope.state.price}</span></div>
            </div>
        );
    };

    middlePart(){
        var spec_tpl = scope.state.goods.spec_tpl;
        var data = {
            choosed_index : scope.state.choosed_index,
            goodsArr : scope.state.goods.goods
        };
        var min = 1;
        return (
            <div className="view-part middle-part">
                {spec_tpl ? <GoodsSpec data={data} specChooseCallback={scope.handleSpecChoose}></GoodsSpec> : ''}
                <GoodsCounter data={scope.state.number} min={min} numberCallback={scope.toHandleNumber}></GoodsCounter>
            </div>
        );
    };

    discountPart(){
        var disGoods = scope.state.orderDisGoods;
        var choose_index_dis = scope.state.choosed_index_dis;
        var discountPart = '';
        if(disGoods && disGoods.length > 0){
            var setting = {
                header : {
                    icon : 'images/gif.png',
                    title : '劲惠礼包',
                    price : parseInt(disGoods[choose_index_dis].add_price),
                    gc_name : disGoods[choose_index_dis].gc_name
                },
                goodsItem : {
                    goods_thumb : disGoods[choose_index_dis].gc_thumb,
                    goods_name : disGoods[choose_index_dis].gc_name,
                    sale_price : parseInt(disGoods[choose_index_dis].add_price),
                },
                isOpt : true,
                footer : {
                    min : 0,
                    max : scope.state.number,
                    choosed_index_dis : choose_index_dis,
                    goods_num : scope.state.discountNum,
                    specArr : scope.state.orderDisGoods
                }
            };
            discountPart = <GoodsItem settings={setting} handleDisNumber={scope.toHandleDisNumber}></GoodsItem>;
        }

        return discountPart;
    };

    discountGoods(){
        return (
            <div className="discount-goods">
                <img className="dis-goods-img" src="images/pic.png" alt="强效清洁型"/>
                <div className="dis-goods-info">
                    <div className="dis-goods-name">强效清洁型</div>
                    <div className="dis-goods-price">RMB <span>199</span></div>
                </div>
            </div>
        );
    };

    contactUs(){
        return (
            <div className="view-part contact-us">
                <a href="tel:028-68529696">
                    <div className="part-name">联系客服</div>
                    <div className="contact-tel">028-68529696</div>
                </a>
            </div>
        );
    };

    details(){
        return (
            <div className="view-part details-part">
                <div className="details-head">商品详情</div>
                <div className="details-box" dangerouslySetInnerHTML={{__html:scope.state.goods.common_body}}></div>
            </div>
        );
    };

    bottom(){
        return (
            <ul className="view-bottom">
                <li>共计：RMB<span className="red-text">{scope.state.totalPrice}</span></li>
                <li onClick={scope.handleAddCart}>加入购物车</li>
                <li onClick={scope.handleBuy}>立即购买</li>
            </ul>
        );
    }
}